<template>
  <div>
    <el-page-header content="视频监控" @back="goBack">
    </el-page-header>
    <el-select v-model="value" placeholder="请选择">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
    </el-select>
    <!-- 主页表格 -->
    <el-table
      :data="products"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="id"
        label="视频编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="title"
        label="视频名称"
        width="100">
      </el-table-column>
      <el-table-column
        prop="fmenu"
        label="视频种类"
        width="100">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="100">
      </el-table-column>
      <el-table-column
        prop="url"
        label="路径"
        width="700">
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button v-if="btnType" @click="handleClick(scope.row)" type="danger" size="small">{{btnText}}</el-button>
          <el-button v-if="!btnType" @click="handleClick(scope.row)" type="primary" size="small">{{btnText}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
        allproducts:[],
        products:[],
        currentsize:1,
        pagesize:3,
        // 分页
        currentPage: 1,
        total:0,
        pagesize:3,
        options: [{
          value: 0,
          label: '未违规视频'
        }, {
          value: 1,
          label: '违规视频'
        }],
        value: 0,
        btnText:'禁用',
        btnType:true
    }
  },
  methods:{
    init(){
      let obj = {
        indexPage:this.currentPage, 
        pageSize:this.pagesize
      }
      this.$ajax({
        url:"admin/findLimitVideos",
        method:"get",
        params:obj
      }).then(resp=>{
        this.allproducts = resp.data.message
        this.products = resp.data.message.normal
        this.total = resp.data.totalPage
      })
    },
    // 数据表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else{
        return 'success-row';
      }
    },
    handleClick(row) {
      // console.log(row);
      // row.p_id  row.p_number
      this.$confirm('是否'+this.btnText+'？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$ajax({
          url:"admin/updateVideoState",
          method:"post",
          data:{id:row.id, state:this.value}
        }).then(resp=>{
          this.$message({
            type: 'success',
            message: this.btnText+'成功!'
          });
          this.init();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });       
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pagesize = val
      this.init();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
      // console.log(`当前页: ${val}`);
    },
    goBack() {
      this.$router.push("/")
    }
  },
  created(){
    this.init();
  },
  watch:{
      "value":function(value){
          if(value==0){
              this.products = this.allproducts.normal;
              this.btnText='禁用';
              this.btnType=true;
              this.total = this.allproducts.normalTotalPage;
          } else if(value==1){
              this.products = this.allproducts.unnormal;
              this.btnText='启用';
              this.btnType=false;
              this.total = this.allproducts.unnormalTotalPage;
          } 
      }
  }
}
</script>

<style scoped>
/* 数据表格 */
.el-table .warning-row {
    background: oldlace;
  }
.el-table .success-row {
  background: #f0f9eb;
}
</style>